<template>
  <div class="Content">
    <div class="tittle">首页</div>
    <!-- Content--top -->
    <div class="ContentTop">
      <span
        @click="doInit(item.val,index)"
        v-for="(item,index) in day"
        :key="index"
        :class="{active:clickindex==index}"
      >{{item.name}}</span>

      <el-date-picker
        style="margin-left:5px"
        v-model="time"
        :editable="false"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="doInit(0)"
      ></el-date-picker>
    </div>
    <!--Content  1-->
    <div
      class="ContentM"
      v-if="data.registerTalent!=-1||data.registerCompany!=-1||data.totalRegisterTalent!=-1||data.totalRegisterCompany!=-1"
    >
      <div class="ContentM_box">
        <div class="display:flex;flex-direction: row;">
          <div class="ContentM_left">
            <div v-show="data.registerTalent!=-1||data.registerCompany!=-1">
              <img src="../../assets/imgs/zhuce.png" alt>
              <span>新注册</span>
            </div>
            <div>
              <div class="rright">
                <div v-show="data.registerTalent!=-1">
                  <p>{{data.registerTalent}}个</p>
                  <p class="fontS">人才</p>
                </div>
                <div v-show="data.registerCompany!=-1">
                  <p>{{data.registerCompany}}个</p>
                  <p class="fontS">企业</p>
                </div>
              </div>
            </div>
          </div>
          <!--<h6></h6>-->
          <div class="ContentM_R marginL">
            <div v-show="data.totalRegisterTalent!=-1||data.totalRegisterCompany!=-1">
              <img src="../../assets/imgs/zong.png" alt>
              <span style="margin-left: -16px">总注册</span>
            </div>
            <div>
              <div class="rright">
                <div v-show="data.totalRegisterTalent!=-1">
                  <p>{{data.totalRegisterTalent}}个</p>
                  <p class="fontS">人才</p>
                </div>
                <div v-show="data.totalRegisterCompany!=-1">
                  <p>{{data.totalRegisterCompany}}个</p>
                  <p class="fontS">企业</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Content  2-->
    <div class="ContentM" style="background-color:#F7F9FC;padding:0">
      <div
        class="ContentM_left"
        style="background-color:#fff; padding: 0 30px 0 96px;margin-right:20px">
        <div v-show="data.auditTalent!=-1||data.auditCompany!=-1" >
          <img src="../../assets/imgs/shenhe.png" alt>
          <span style="margin-left: -21px">待审核</span>
        </div>
        <div>
          <div class="rright" >
            <div v-show="data.auditTalent!=-1"  @click="shenhe(0)">
              <p>{{data.auditTalent}}个</p>
              <p class="fontS">人才</p>
            </div>
            <div v-show="data.auditCompany!=-1" @click="shenhe(1)">
              <p>{{data.auditCompany}}个</p>
              <p class="fontS">企业</p>
            </div>
          </div>
        </div>
      </div>

      <div
        class="ContentM_R"
        v-if="data.communicateTalent!=-1"
        style="background-color:#fff; padding: 0 70px 0 20px;"
        @click="ontalk"
      >
        <div style="margin-left:0">
          <img src="../../assets/imgs/goutong.png" alt>
          <span style="margin-left: -21px">待沟通</span>
        </div>
        <div>
          <div class="rright">
            <div style="width:100%">
              <p style>{{data.communicateTalent}}个</p>
              <p class="fontS">人才</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Content  3-->
    <div
      class="ContentM1"
      @click="onbaord"
      v-if="data.hiredTalent!=-1||data.guaranteeTalent!=-1||data.guaranteeDepartureTalent!=-1||data.hasGuaranteeTalent!=-1"
    >
      <div class="ContentM_left1">
        <div style="margin-right:30px">
          <img src="../../assets/imgs/ruzhi.png" alt style="margin-left:21px">
          <span style="margin-left: 3px">人才入职</span>
        </div>
      </div>
      <div
        style="float:left;width:250px;height:143px;box-sizing:border-box;padding:40px 0 28px 0;border-radius:5px; "
      >
        <div class="right" v-show="data.hiredTalent!=-1">
          <div style="width:100%;margin-left:30px;">
            <p style>{{data.hiredTalent}}个</p>
            <p class="fontS" style="width:100%;height: 15px;text-align: center;">入职成功</p>
          </div>
        </div>
      </div>
      <div
        style="float:left;width:250px;height:143px;box-sizing:border-box;padding:40px 0 28px 0;border-radius:5px;margin-right:97px;margin-left:97px; "
      >
        <div class="right" v-show="data.guaranteeTalent!=-1">
          <div style="width:80%;margin-left:30px;">
            <p style>{{data.guaranteeTalent}}个</p>
            <p class="fontS" style="width:100%;height: 15px;text-align: center;">未过保</p>
          </div>
        </div>
      </div>
      <div
        style="float:left;width:250px;height:143px;box-sizing:border-box;padding:40px 0 28px 0;border-radius:5px;"
      >
        <div class="right" v-show="data.guaranteeDepartureTalent!=-1">
          <div style="width:100%;margin-left:30px;text-align: center">
            <p style>{{data.guaranteeDepartureTalent}}个</p>
            <p class="fontS" style="width:110px;height: 15px;text-align: center;">未过保已离职</p>
          </div>
        </div>
      </div>
      <div
        style="float:left;width:250px;height:143px;box-sizing:border-box;padding:40px 0 28px 0;border-radius:5px;margin-left:97px; "
      >
        <div class="right" v-show="data.hasGuaranteeTalent!=-1">
          <div style="width:100%;margin-left:20px;">
            <p style>{{data.hasGuaranteeTalent}}个</p>
            <p class="fontS" style="width:100%;height: 15px;text-align: center;">已过保</p>
          </div>
        </div>
      </div>
    </div>

    <!--Content  4-->
    <div
      class="ContentM1"
      @click="oncompany"
      v-if="data.cooperationCompany!=-1||data.cooperationCompany!=-1||data.tryCooperationCompany!=-1||data.pasueCooperationCompany!=-1"
    >
      <div class="ContentM_left1">
        <div style="margin-right:38px">
          <img src="../../assets/imgs/hezuo.png" alt style="margin-left:21px">
          <span style="margin-left: 3px">企业合作</span>
        </div>
      </div>
      <div
        style="float:left;width:360px;height:144px;box-sizing:border-box;padding:40px 0 0 0;border-radius:5px; "
      >
        <div class="rright">
          <div style="width:100%" v-show="data.cooperationCompany!=-1">
            <p style>{{data.cooperationCompany}}个</p>
            <p class="fontS">已合作</p>
          </div>
        </div>
      </div>
      <div
        style="float:left;width:360px;height:144px;box-sizing:border-box;padding:40px 0 0 0;border-radius:5px;margin-right:103px;margin-left:103px; "
      >
        <div class="rright">
          <div style="width:100%" v-show="data.tryCooperationCompany!=-1">
            <p style>{{data.tryCooperationCompany}}个</p>
            <p class="fontS">试用合作</p>
          </div>
        </div>
      </div>
      <div
        style="float:left;width:360px;height:144px;box-sizing:border-box;padding:40px 0 28px 0;border-radius:5px;"
      >
        <div class="rright">
          <div style="width:100%" v-show="data.pasueCooperationCompany!=-1">
            <p style>{{data.pasueCooperationCompany}}个</p>
            <p class="fontS">暂不合作</p>
          </div>
        </div>
      </div>
    </div>

    <!--Content  5.1-->
    <div class="ContentM" style="background-color:#F7F9FC;padding:0">
      <div
        @click="onoffer"
        v-if="data.notPayCoverBonus!=-1||data.payCoverBonus!=-1"
        class="ContentM_left"
        style="background-color:#fff; padding:0 30px 0 96px;margin-right:20px"
      >
        <div>
          <img src="../../assets/imgs/jiangjin.png" alt>
          <span>自荐奖金</span>
        </div>
        <div>
          <div class="rright">
            <div v-show="data.notPayCoverBonus!=-1">
              <p>{{data.notPayCoverBonus}}个</p>
              <p class="fontS">待发放</p>
            </div>
            <div v-show="data.payCoverBonus!=-1">
              <p>{{data.payCoverBonus}}个</p>
              <p class="fontS">已发放</p>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ContentM_R"
        style="background-color:#fff; padding: 0 46px 0 20px;"
        @click="oncharges"
        v-if="data.notPayCommissionCompany!=-1||data.payCommissionCompany!=-1"
      >
        <div style="margin-left:0">
          <img src="../../assets/imgs/yongjin.png" alt>
          <span style="margin-left:-13px">职位佣金</span>
        </div>
        <div>
          <div class="rright">
            <div v-show="data.notPayCommissionCompany!=-1">
              <p style>{{data.notPayCommissionCompany}}个</p>
              <p class="fontS">待支付</p>
            </div>
            <div v-show="data.payCommissionCompany!=-1">
              <p style>{{data.payCommissionCompany}}个</p>
              <p class="fontS">已支付</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Content',
  data() {
    return {
      data: [],
      time: '',
      clickindex: 0,
      day: [
        {
          val: 1,
          name: '今天'
        },
        {
          val: -1,
          name: '昨天'
        },
        {
          val: -6,
          name: '7天'
        },
        {
          val: -29,
          name: '30天'
        }
      ],
      type: 0
    }
  },
  methods: {
    doInit(type, index) {
      this.type = type
      this.clickindex = index
      console.log(this.clickindex)
      var startTimeStr = ''
      var endTimeStr = ''
      if (this.time != null) {
        var timeStr = this.time + ''
        var timeArr = timeStr.split(',')
        startTimeStr = timeArr[0]
        endTimeStr = timeArr[1]
      }
      //初始化加载数据
      this.lAxios({
        method: 'post',
        url: '/platform/selectAllInfo.do',
        params: {
          //传参
          startTimeStr: startTimeStr,
          endTimeStr: endTimeStr,
          type: type
        }
      })
        .then(res => {
          if (res.data.status == 0) {
            //成功
            this.data = res.data.data
            // console.log(res);
            // console.log(this.data);
          } else {
            //失败
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          //异常
          //失败的回调函数
          console.log(err)
        })
    },
    //审核
    shenhe(index) {
      this.$router.push({
        path: '/onAuditing',
        query: { type: index, time: this.time }
      })
    },
    //沟通
    ontalk() {
      this.$router.push({
        path: '/onTalk',
        query: { type: this.type, time: this.time }
      })
    },
    //入职
    onbaord() {
      this.$router.push({
        path: '/onBaord',
        query: { type: this.type, time: this.time }
      })
    },
    //企业合作
    oncompany() {
      this.$router.push({
        path: '/onCompany',
        query: { type: this.type, time: this.time }
      })
    },
    //自荐奖金
    onoffer() {
      this.$router.push({
        path: '/onOffer',
        query: { type: this.type, time: this.time }
      })
    },
    //企业佣金
    oncharges() {
      this.$router.push({
        path: '/onCharges',
        query: { type: this.type, time: this.time }
      })
    }
  },
  created() {
    this.doInit(1, 0)
  }
}
</script>

<style lang="scss" scoped>
.Content {
  height: 100%;
  font-size: 12px;
  background-color: #f7f9fc;
  position: relative;
  padding-left: 20px;
  overflow-x: hidden;
  padding-bottom: 50px;
}
.Content::-webkit-scrollbar {
  display: none;
}
.tittle {
  height: 54px;
  line-height: 54px;
  color: #3d4966;
  font-size: 14px;
}
.ConBox {
  height: 730px;
  margin-left: 1%;
  margin-top: 10px;
  background-color: white;
}
.ContentTop {
  padding: 40px 0 30px 40px;
  background-color: #fff;
}

.ContentTop span {
  display: inline-block;
  margin-right: 25px;
  border: 1px solid rgba(211, 219, 235, 1);
  border-radius: 5px;
  font-size: 18px;
  width: 120px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.active {
  background-color: #3377ff;
  color: #fff;
}
/*---------------Content  1-------------------------*/
.ContentM {
  width: 100%;
  background-color: white;
  margin-top: 20px;
  overflow-x: hidden;
  padding: 0px 80px 0px 96px;
  display: flex;
  flex-direction: row;
}
.ContentM_box {
  width: 90%;
}
.ContentM1 {
  width: 90%;
  background-color: white;
  margin-top: 20px;
  overflow-x: hidden;
  padding: 0px 80px 0px 96px;
  display: flex;
  flex-direction: row;
}
.ContentM_left {
  width: 47%;
  float: left;
  display: flex;
  flex-direction: row;
  margin-right: 0;
}
.ContentM_left1 {
  width: 20%;
  float: left;
  padding: 35px 0 0 0;
}
.ContentM_left1 > div {
  display: flex;
  flex-direction: column;
  width: 80px;
  img {
    width: 40px;
    margin-left: 5px;
    height: 42px;
    margin-bottom: 14px;
  }
  span {
    color: #3d4966;
    font-size: 18px;
    margin-left: -20px;
  }
}
.ContentM_left > div:nth-child(1) {
  float: left;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  text-align: center;
  margin-right: 20px;
  width: 80px;
  img {
    width: 40px;
    margin-left: 5px;
    height: 42px;
    margin-bottom: 14px;
  }
  span {
    color: #3d4966;
    font-size: 18px;
    margin-left: -15px;
  }
}

.ContentM_left > div:nth-child(2) {
  float: left;
  /*display: flex;*/
  /*flex-direction: column;*/
  width: 385px;
  height: 143px;
  box-sizing: border-box;
  // border: 1px solid rgba(211, 219, 235, 1);
  border-radius: 5px;
  padding: 30px 61px 40px 80px;
}

.ContentM_left > div:nth-child(3) {
  /*font-size: 14px;*/
  margin-left: 0px;
  span {
    margin-right: 64px;
  }
}

.ContentM_R {
  width: 47%;
  float: left;
  display: flex;
  flex-direction: row;
}
.ContentM_R > div:nth-child(1) {
  float: left;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  text-align: center;
  margin-right: 20px;
  width: 80px;
  img {
    width: 40px;
    margin-left: 5px;
    height: 42px;
    margin-bottom: 14px;
  }
  span {
    color: #3d4966;
    font-size: 18px;
    //margin-left: -12px;
  }
}
.ContentM_R > div:nth-child(2) {
  float: left;
  display: flex;
  flex-direction: column;
  width: 385px;
  height: 143px;
  box-sizing: border-box;
  // border: 1px solid rgba(211, 219, 235, 1);
  border-radius: 5px;
  padding: 30px 61px 40px 80px;
}
.rright {
  width: 100%;
  height: 100%;
  div {
    float: left;
    width: 50%;
    text-align: center;
    p:nth-child(1) {
      color: #3377ff;
      font-size: 30px;
      margin-bottom: 18px;
      text-align: center;
    }
  }
  div:nth-child(2) {
    float: right;
    width: 50%;
    text-align: center;

    p:nth-child(1) {
      color: #3377ff;
      font-size: 30px;
      margin-bottom: 18px;
      text-align: center;
    }
  }
}

.ContentM_R > div:nth-child(3) {
  /*font-size: 14px;*/
  margin-left: 88px;
  span {
    margin-right: 34px;
  }
}
h6 {
  float: left;
  width: 2px;
  height: 114px;
  background: rgba(211, 219, 235, 1);
  margin-top: 8px;
  margin-left: 0px;
  margin-right: 0px;
}
.marginL {
  margin-left: 5%;
}
.right {
  width: 60%;
  /*height: 100%;*/
  div {
    float: left;
    width: 20%;
    text-align: center;
    padding: 0 0 0 0;
    p:nth-child(1) {
      color: #3377ff;
      font-size: 28px;
      margin-bottom: 18px;
      text-align: center;
    }
  }
  div:nth-child(2) {
    float: right;
    width: 20%;
    text-align: center;

    p:nth-child(1) {
      color: #3377ff;
      font-size: 28px;
      margin-bottom: 18px;
      text-align: center;
    }
  }
}
/*-----------------Content  2.1--------------------------*/

/*.ContentW {*/
/*width: 314px;*/
/*height: 115px;*/
/*background-color: white;*/
/*border: 1px solid black;*/
/*position: absolute;*/
/*top: 190px;*/
/*left: 20px;*/
/*}*/

/*.ContentW > div:nth-child(1) {*/
/*font-size: 20px;*/
/*font-weight: bold;*/
/*margin-top: 30px;*/
/*}*/

/*.talentT > span {*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
/*font-size: 20px;*/
/*}*/

/*.talentT > span:nth-child(2) {*/
/*font-size: 26px;*/
/*}*/

/*.talentT > span:nth-child(3) {*/
/*font-size: 26px;*/
/*}*/

/*.ContentW > div:nth-child(2) {*/
/*font-size: 12px;*/
/*margin-top: 20px;*/
/*}*/

/*.talent {*/
/*margin-left: 118px;*/
/*}*/

/*.talent > span:nth-child(2) {*/
/*margin-left: 70px;*/
/*}*/

/*--------------------Content  2.2------------------------------*/
/*.ContentP {*/
/*width: 222px;*/
/*height: 115px;*/

/*font-weight: bold;*/
/*background-color: white;*/
/*border: 1px solid black;*/
/*position: absolute;*/
/*top: 190px;*/
/*left: 360px;*/
/*}*/
/*.ContentP > .talentT {*/
/*margin-top: 25px;*/
/*}*/
/*.ContentP > .talent {*/
/*margin-top: 20px;*/
/*}*/
/*--------------------Content  3------------------------------*/
/*.induction {*/
/*width: 884px;*/
/*height: 115px;*/
/*font-weight: bold;*/
/*background-color: white;*/
/*border: 1px solid black;*/
/*position: absolute;*/
/*top: 320px;*/
/*left: 20px;*/
/*}*/
/*.induction > .talentT {*/
/*display: flex;*/
/*margin-top: 30px;*/
/*}*/
/*.induction > .talentT > span {*/
/*flex: 1;*/
/*}*/
/*.induction > .talentT > span:nth-child(4) {*/
/*font-size: 26px;*/
/*}*/
/*.induction > .talentT > span:nth-child(5) {*/
/*font-size: 26px;*/
/*}*/
/*.induction > .talent {*/
/*display: flex;*/
/*margin-top: 20px;*/
/*}*/
/*.induction > .talent > span {*/
/*flex: 1;*/
/*margin-right: 10px;*/
/*}*/
.induction > .talent {
  // margin-left: -30px;
}

/*--------------------Content  4------------------------------*/
.enterprise {
  width: 438px;
  height: 115px;
  font-weight: bold;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 450px;
  left: 20px;
}
.enterprise > .talentT {
  display: flex;
  margin-top: 30px;
}
.enterprise > .talentT > span:nth-child(4) {
  font-size: 26px;
}
.talentBox {
  width: 288px;
  height: 20px;
  display: flex;
  margin-top: 20px;
  margin-left: 32%;
  /*border: 1px solid pink;*/
}
.talentBox > span {
  flex: 1;
}

/*-------------------Content  5.1--------------------------*/
.bonus {
  width: 391px;
  height: 115px;
  font-weight: bold;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 580px;
  left: 20px;
}
.bonus > .talentT {
  margin-top: 25px;
}
.bonus > .talent {
  width: 200px;
  height: 20px;
  text-align: center;
  margin-top: 20px;
}
/*-------------------Content  5.2--------------------------*/
.commission {
  width: 350px;
  height: 115px;
  font-weight: bold;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 580px;
  left: 430px;
}
.commission > .talentT {
  margin-top: 25px;
}
.commission > .talent {
  width: 200px;
  height: 20px;
  text-align: center;
  margin-top: 20px;
}
@media screen and (max-width: 1200px) {
  .ContentM {
    width: 100%;
  }
  .ContentM_box {
    width: 90%;
  }
  .ContentM_left {
    width: 40%;
  }
  .ContentM_R {
    width: 40%;
    display: flex;
    flex-direction: row;
  }
  .ContentM_left > div:nth-child(1) {
    margin-right: 37px;
    img {
      width: 30px;
      margin-left: 5px;
      height: 30px;
      margin-bottom: 14px;
    }
    span {
      color: #3d4966;
      font-size: 20px;
    }
  }
  .ContentM_R > div:nth-child(1) {
    width: 700px;
    img {
      width: 30px;
      margin-left: 5px;
      height: 30px;
      margin-bottom: 14px;
    }
    span {
      color: #3d4966;
      font-size: 20px;
    }
  }
  .ContentM_R > div:nth-child(2) {
    width: 355px;
    height: 143px;
    box-sizing: border-box;
    border: 1px solid rgba(211, 219, 235, 1);
    border-radius: 5px;
    padding: 15px 50px 20px 50px;
  }
}
.fontS {
  font-size: 18px;
}
</style>
